<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

    <title>{{{title}}}</title>
    <link rel="stylesheet" href="{{{base}}}dist/reset.css">
    <link rel="stylesheet" href="{{{base}}}dist/reveal.css" />
    <link rel="stylesheet" href="{{{base}}}css/slides-extended.css" />
    <link rel="stylesheet" href="{{{base}}}{{{themeUrl}}}" id="theme" />
    <link rel="stylesheet" href="{{{base}}}{{{highlightThemeUrl}}}" />
    {{#enableCustomControls}}
    <link rel="stylesheet" href="{{{base}}}plugin/customcontrols/style.css">
    {{/enableCustomControls}}
    {{#enableChalkboard}}
    <link rel="stylesheet" href="{{{base}}}plugin/chalkboard/style.css">
    {{/enableChalkboard}}

    {{#enablePointer}}
    <link rel="stylesheet" href="{{{base}}}plugin/reveal-pointer/pointer.css" />
    {{/enablePointer}}

    {{#cssPaths}}
    <link rel="stylesheet" href="{{{base}}}{{{.}}}" />
    {{/cssPaths}}
    {{#remoteCSSPaths}}
    <link rel="stylesheet" href="{{{.}}}" />
    {{/remoteCSSPaths}}

    <script defer src="{{{base}}}dist/fontawesome/all.min.js"></script>
    <script defer src="{{{base}}}plugin/load-mathjax.js"></script>

    <script type="text/javascript">
        function pageInIframe() {
            return (window.location !== window.parent.location);
        }

        let forgetPop = true;
        function onPopState(event) {
            if(forgetPop){
                forgetPop = false;
            } else if( pageInIframe()) {
                parent.postMessage(event.target.location.href, "app://obsidian.md");
            }
        }
        window.onpopstate = onPopState;
        window.onmessage = event => {
            if(event.data == "reload"){
                window.document.location.reload();
            }
            forgetPop = true;
        }

        function fitElements() {
            const itemsToFit = document.getElementsByClassName('fitText');
            for (const item in itemsToFit) {
                if (Object.hasOwnProperty.call(itemsToFit, item)) {
                    const element = itemsToFit[item];
                    fitElement(element, 1, 1000);
                    element.classList.remove('fitText');
                }
            }
        }

        function fitElement(element, start, end) {

            let size = (end + start) / 2;
            element.style.fontSize = `${size}px`;

            if (Math.abs(start - end) < 1) {
                while (element.scrollHeight > element.offsetHeight) {
                    size--;
                    element.style.fontSize = `${size}px`;
                }
                return;
            }

            if (element.scrollHeight > element.offsetHeight) {
                fitElement(element, start, size);
            } else {
                fitElement(element, size, end);
            }
        }

        document.onreadystatechange = () => {
            fitElements();
            if (document.readyState === 'complete') {
                if (pageInIframe() && window.location.href.indexOf("?export") != -1){
                    parent.postMessage(event.target.location.href, "app://obsidian.md");
                }
                if (window.location.href.indexOf("print-pdf") != -1){
                    let stateCheck = setInterval(() => {
                        clearInterval(stateCheck);
                        window.print();
                    }, 250);
                }
            }
        };
    </script>
</head>

<body>
    <div class="reveal">
        <div class="slides">{{{slides}}}</div>
    </div>

    <script src="{{{base}}}dist/reveal.js"></script>
    <script src="{{{base}}}plugin/notes/notes.js"></script>
    <script src="{{{base}}}plugin/markdown/markdown.js"></script>
    <script src="{{{base}}}plugin/highlight/highlight.js"></script>

    <script src="{{{base}}}plugin/zoom/zoom.js"></script>
    <script src="{{{base}}}plugin/math/math.js"></script>
    <script src="{{{base}}}plugin/mermaid/mermaid.js"></script>
    <script src="{{{base}}}plugin/chart/chart.umd.js"></script>
    <script src="{{{base}}}plugin/chart/plugin.js"></script>
    {{#enableMenu}}
    <script src="{{{base}}}plugin/menu/menu.js"></script>
    {{/enableMenu}}
    {{#enableCustomControls}}
    <script src="{{{base}}}plugin/customcontrols/plugin.js"></script>
    {{/enableCustomControls}}
    {{#enableChalkboard}}
    <script src="{{{base}}}plugin/chalkboard/plugin.js"></script>
    {{/enableChalkboard}}
    {{#enablePointer}}
    <script src="{{{base}}}plugin/reveal-pointer/pointer.js"></script>
    {{/enablePointer}}
    {{#timeForPresentation}}
    {{#enableTimeBar}}
    <script src="{{{base}}}plugin/elapsed-time-bar/elapsed-time-bar.js"></script>
    {{/enableTimeBar}}
    {{/timeForPresentation}}

    <script>
        function extend() {
            const target = {};
            for (let i = 0; i < arguments.length; i++) {
                const source = arguments[i];
                for (const key in source) {
                    if (source.hasOwnProperty(key)) {
                        target[key] = source[key];
                    }
                }
            }
            return target;
        }

        function isLight(color) {
            let hex = color.replace('#', '');

            // convert #fff => #ffffff
            if (hex.length == 3) {
                hex = `${hex[0]}${hex[0]}${hex[1]}${hex[1]}${hex[2]}${hex[2]}`;
            }

            const c_r = parseInt(hex.substr(0, 2), 16);
            const c_g = parseInt(hex.substr(2, 2), 16);
            const c_b = parseInt(hex.substr(4, 2), 16);
            const brightness = ((c_r * 299) + (c_g * 587) + (c_b * 114)) / 1000;
            return brightness > 155;
        }

        const bgColor = getComputedStyle(document.documentElement).getPropertyValue('--r-background-color').trim();

        if (isLight(bgColor)) {
            document.body.classList.add('has-light-background');
        } else {
            document.body.classList.add('has-dark-background');
        }

        // default options to init reveal.js
        const defaultOptions = {
            controls: true,
            progress: true,
            history: true,
            center: true,
            transition: 'default', // none/fade/slide/convex/concave/zoom
            plugins: [
                RevealMarkdown,
                RevealHighlight,
                RevealZoom,
                RevealNotes,
                RevealMath.MathJax3,
                RevealMermaid,
                RevealChart,
                {{#enableCustomControls}}
                RevealCustomControls,
                {{/enableCustomControls}}
                {{#enableMenu}}
                RevealMenu,
                {{/enableMenu}}
                {{#enablePointer}}
                RevealPointer,
                {{/enablePointer}}
                {{#enableChalkboard}}
                RevealChalkboard,
                {{/enableChalkboard}}
                {{#timeForPresentation}}
                {{#enableTimeBar}}
                ElapsedTimeBar
                {{/enableTimeBar}}
                {{/timeForPresentation}}
            ],
            {{#timeForPresentation}}
            allottedTime: {{{.}}} * 1000,
            {{/timeForPresentation}}
            mathjax3: {
                mathjax: '{{{base}}}plugin/math/mathjax/tex-chtml-full.js',
            },
            markdown: {
                gfm: true,
                mangle: false,
                pedantic: false,
                smartLists: false,
                smartypants: false,
            },
            mermaid: {
                theme: isLight(bgColor) ? 'default' : 'dark',
            },
            {{#enableCustomControls}}
            customcontrols: {
                controls: [
                    {{#enableOverview}}
                    {
                        id: 'toggle-overview',
                        title: 'Toggle overview (O)',
                        icon: '<i class="fa fa-th"></i>',
                        action: 'Reveal.toggleOverview();'
                    },
                    {{/enableOverview}}
                    {{#enableChalkboard}}
                    {
                        icon: '<i class="fa fa-pen-square"></i>',
                        title: 'Toggle chalkboard (B)',
                        action: 'RevealChalkboard.toggleChalkboard();'
                    },
                    {
                        icon: '<i class="fa fa-pen"></i>',
                        title: 'Toggle notes canvas (C)',
                        action: 'RevealChalkboard.toggleNotesCanvas();'
                    },
                    {{/enableChalkboard}}
                ]
            },
            {{/enableCustomControls}}
            {{#enableMenu}}
            menu: {
                loadIcons: false
            }
            {{/enableMenu}}
        };

        if ( pageInIframe() ) {
            defaultOptions.scrollActivationWidth = 5;
        }

        // options from URL query string
        const queryOptions = Reveal().getQueryHash() || {};

        const options = extend(defaultOptions, {{{ revealOptionsStr }}}, queryOptions);
    </script>

    <script>
      Reveal.initialize(options);
    </script>
    <!-- created with {{! ignore me }}Slides Extended reveal.html template -->
</body>
</html>
